<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="hospital.title"/></title>
    <meta name="heading" content="<fmt:message key='hospital.title'/>"/>
    <meta name="menu" content="MainMenu"/>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/highchart/js/highcharts.js"></script>
<!--script type="text/javascript" src="scripts/highchart/js/modules/exporting.js"></script-->
<script type="text/javascript" src="scripts/highchart/js/themes/dark-blue.js"></script>

<script type="text/javascript">

var monthStr = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
	
var monthNames = new Array() ;	
	
var barChartInfo =[ 
		{
            name: 'Male',
            data: [5, 3, 4, 7, 2,8]
        }, {
            name: 'Female',
            data: [3, 4, 4, 2, 5, 10]
        }
       ];

	   
	
var barInfo ="[{name: 'Male',data: [5, 3, 4, 7, 2,8] }, { name: 'Female',data: [3, 4, 4, 2, 5, 10] } ]}";	   
	   
	   
var piechartinfo = {
                            type: 'column',
                            data: []
                    };

var jsonString=[{ name: 'Male', data: [5, 3, 4, 7, 2,8]},{name: 'Female', data: [3, 4, 4, 2, 5, 10]}];

//var jsonString="{ \"name\": \"MALE\",\"data\":[5, 3, 4, 7, 2,8] , \"name\": \"FEMALE\",\"data\":[5, 6, 9, 7, 2,8] }";

var jsonString1="{\"Male\": 35.0, \"FeMale\":65.0}";

$(function () {
	
    var chart;
    $(document).ready(function() {
     
	//Added this to get Last Six Month Names 
	var curDate = new Date();
     for(i=0;i<6;i++){	 
	   monthNames[i] = monthStr[curDate.getMonth()];
	   curDate.setMonth(curDate.getMonth() -1);
	 }

	 function requestData()
	    {
		
		
	    	if (typeof(chart) == 'undefined') 
	    	{
	    	  setTimeout(requestData, 1000);   
	    	}
	    	else{
		
			$.ajax({
				url: 'resources/hospitalHome.action?hospitalId=${hospitalId}',
				success: function(response) {
						    
							 //alert('Test ' + response);
						   
						     var response = JSON.parse(response);
							 
							 //alert('Test ' + response);
							 
						     chart.addSeries(response[0]); 
							 chart.addSeries(response[1]); 
							
						 // for (var i = 0; i < barChartInfo.length; i++) {
								//var object = barChartInfo[i];
								//alert ('Test ' + object) ;
								//var data = "[" + object.data + "]";
								
								  //chart.addSeries(object); 
								
								// chart.series[i].setData( object.data);
							    //chart.series[1].setData( [15, 10, 6, 17, 22,18] );
							//}

						   
						 //  var students = JSON.stringify(barInfo); 
						   
						  // var response = JSON.parse(jsonString);
						   
						   //alert('Test '  + response  );
						   //piechartinfo.data.push(['Male',[1,2,3,4,5]]);
						  //piechartinfo.data.push(['FeMale', response.FeMale]);
						  //chart.addSeries(barChartInfo); 
						  
						  //chart.series= barChartInfo;
						  
						   //chart.series[0].setData( [15, 23, 4, 7, 2,8] );
						   //chart.series[1].setData( [15, 10, 6, 17, 22,18] );
						 
				},
					cache: false
				});
	     
	    	}
	    }
	 
	 
	 chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
				
				events: {
						load: requestData
						}
            },
            title: {
                text: 'Birth Status (Last Six Months )'
            },
            xAxis: {
                categories:  monthNames 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Births'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
           
        });
    });
    
	
});
                                 
	
	</script>

	
</head>
<body class="home">
<s:hidden id="hospitalId" key="hospitalId" />
<div class="span5" >
		<div id="container" style="min-width: 300px; height: 250px; margin: 0 auto"></div>
			
		
        <div class="portlet-container" style="width:370px;margin-top:15px;height: 225px;">
			<div class="portlet-header">
				<div class="fltleft">
					<h3>STATISTICS (Last Six Months)</h3>
				</div>
			</div>
			<div class="portlet-content" style="margin-top:5px;">
			
			<display:table name="hospitalStatus" 
                   pagesize="10" class="table table-condensed" export="false" style="width: 99%" >
	        <display:column property="label" style="font-size: 14px; font-family:verdana; font-weight:bold; width: 70%" />
	        <display:column property="value" style="font-size: 15px; font-family:sarif; font-weight:bold; text-align:right; width: 25%" /> 
		
			<display:setProperty name="paging.banner.all_items_found" value=""/>
			<display:setProperty name="basic.show.header" value="false"/>
			
			</display:table>				
				
	    </div>	
     </div>	 
</div>
<div class="span6" >

	<div class="portlet-container" style="width:500px; height: 250px;">
			<div class="portlet-header">
				<div class="fltleft">
					<h3>PENDING SUBMISSIONS</h3>
				</div>
			</div>
			<div class="portlet-content" style="margin-top:5px;">
					<display:table name="birthList" cellspacing="0" cellpadding="0" requestURI=""
                   defaultsort="1" id="births" pagesize="6" 
                   class="table table-condensed" style="width: 99%" export="false">
	       <security:authorize ifAllGranted="ROLE_ZONE_BIRTH">
	       			<display:column property="motherName" escapeXml="true" titleKey="birth.motherName" style="width: 20%"
	                        />
	       </security:authorize> 
	       <security:authorize ifAllGranted="ROLE_HOSPITAL">
	       			<display:column property="motherName" escapeXml="true" titleKey="birth.motherName" style="width: 20%"
	                        url="/createBirth.action?from=dashboard" paramId="id" paramProperty="id"/>
	       </security:authorize> 
	                        
	        <display:column property="fatherName" escapeXml="true" sortable="false" titleKey="birth.fatherName"
	                        style="width: 20%"/>
			<display:column property="status" escapeXml="true" sortable="false" title="Status"
	                        style="width: 10%"/>                        
	        <display:column property="sex" sortable="false" titleKey="birth.sex" style="width: 10%" autolink="true"
	                        media="html"/>
	        <display:column property="birthDateString" sortable="false" format="{0,date,dd-MM-yyyy}" titleKey="birth.birthDate" style="width: 35%" autolink="true"
	                        media="html"/> 
	
			<display:setProperty name="paging.banner.all_items_found" value=""/>
			<display:setProperty name="paging.banner.some_items_found" value=""/>
	
			</display:table>			
			</div>
			
	</div>
	
	<div class="portlet-container" style="width:500px;margin-top:12px;height: 225px;">
			<div class="portlet-header">
				<div class="fltleft">
					<h3>REJECTED SUBMISSIONS</h3>
				</div>
			</div>
			<div class="portlet-content" style="margin-top:5px;">
					<display:table name="rejectedList" cellspacing="0" cellpadding="0" requestURI=""
                   defaultsort="1" id="births" pagesize="5" export="false" class="table table-condensed" style="width: 99%" >
	        
	        <security:authorize ifAllGranted="ROLE_ZONE_BIRTH">
	       <display:column property="motherName" escapeXml="true" titleKey="birth.motherName" style="width: 20%"
	                        />
	       </security:authorize> 
	       <security:authorize ifAllGranted="ROLE_HOSPITAL">
	       <display:column property="motherName" escapeXml="true" titleKey="birth.motherName" style="width: 20%"
	                        url="/createBirth.action?from=dashboard" paramId="id" paramProperty="id"/>
	       </security:authorize> 
	                          
	        <display:column property="fatherName" escapeXml="true" sortable="false" titleKey="birth.fatherName"
	                        style="width: 20%"/>
			<display:column property="status" escapeXml="true" sortable="false" title="Status"
	                        style="width: 10%"/>                        
	        <display:column property="sex" sortable="false" titleKey="birth.sex" style="width: 10%" autolink="true"
	                        media="html"/>
	        <display:column property="birthDateString" sortable="false" titleKey="birth.birthDate" style="width: 35%" autolink="true"
	                        media="html"/> 
			<display:setProperty name="paging.banner.all_items_found" value=""/>
			<display:setProperty name="paging.banner.some_items_found" value=""/>
			<display:setProperty name="paging.banner.full" value=""/>
			<display:setProperty name="paging.banner.first" value=""/>
			</display:table>			
			</div>
			
	</div>	
</div>		
</body>